const sc: HTMLCanvasElement = document.getElementById('screen') as HTMLCanvasElement
const context = sc.getContext('2d')
const start = ['A', 'B', 'C', 'D']
const imgs = new Array<Item>()
for (let i = 0; i < 16; i++) {
    for (let j = 0; j < 10; j++) {
        const x = i * 50, y = j * 50, width = 50, height = 50
        const bg = start[Math.floor(Math.random() * start.length)]
        const num = (Math.floor(Math.random() * 16)).toString(16).toUpperCase()
        const src = `../assets/images/maprect/${bg}_0${num}.png`
        const img = new Image()
        img.src = src
        imgs.push({ x, y, width, height, img })
    }
}
setTimeout(() => {
    imgs.forEach(e => {
        context?.drawImage(e.img, e.x, e.y, e.width, e.height)
    })
}, 500);

class Item {
    x: number = 0
    y: number = 0
    width: number = 50
    height: number = 50
    img: HTMLImageElement
    constructor(x: number, y: number, img: HTMLImageElement, width: number, height: number) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
        this.img = img
    }
}